<template>
    <section class="lineWrap_0310_2">
      <div class="wrap_0310_2">
        <div class="line_0310_2">
          <div class="abs_0310_2" :class="phases[(level-1)%4]"></div>
          <span v-for="(item, index) in circleArr" :class="{'oldColor_0310_2':index<(level-1)%4,'activeColor_0310_2': index == (level-1)%4 } " class="item_0310_2"></span>
        </div>
      </div>
      <ol class="lineText_0310_2">
        <li class="itemText_0310_2" :class="{'bold_0310_2':index == (level-1)%4}" v-for="(item, index) in circleArr">{{item}}</li>
      </ol>
    </section>
</template>
<script>
export default {
  props: ['level'],
  data () {
    return {
      circleArr: ["订单提交","约见倒计时","待评价","已完成"],
      phases:['phases1_1','phases2_2','phases3_3','phases4_4']
    }
  },
  methods: {
    
  }
}

</script>
<style lang="less">
  .lineWrap_0310_2 {
    height: .71rem;
    background: white;
    padding-top: .1rem;
    box-sizing: border-box;
    
    .lineText_0310_2 {
      width: 3.75rem;
      display: flex;
      justify-content: space-between;
      margin: .08rem auto 0;
      padding: 0;
      .itemText_0310_2 {
        width: 20%;
        text-align: center;
        color: #828282;
      }
      .bold_0310_2 {
        color: #39393D;
        font-weight: bold;
      }
    }
    .wrap_0310_2 {
      height: .3rem; 
      width: 100%; 
      display: flex; 
      align-items: center;
      .line_0310_2 {
        width: 3.25rem;
        height: .05rem;
        background: #E5E5E5;
        margin: 0.14rem auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .phases1_1 {
          width: 0%!important;
        }
        .phases2_2 {
          width: 33%!important;
        }
        .phases3_3 {
          width: 66%!important;
        }
        .phases4_4 {
          width: 100%!important;
        }
        .abs_0310_2 {
          width: 0%;
          height: .05rem;
          position: absolute;
          background: #9CAADB;
        }
        .item_0310_2 {
          display: block;
          width: .3rem;
          height: .3rem;
          border-radius: 50%;
          background: #E5E5E5;
          position: relative;
          z-index: 3;
        }
        .oldColor_0310_2 {
          background: #9CAADB;
        }
        .activeColor_0310_2 {
          background:#557AFF!important;
        }
      }
      
    }
  }
</style>
